<template>
  <div class="yanzhen_wrap">
    <div v-if="what2Show === '-1'">
      <i
        :style="{
          fontSize: '40px',
          marginRight: '10px',
          fontWeight: '900',
        }"
        class="el-icon-loading"
      ></i>
      <span :style="{ fontSize: '20px' }">正在验证</span>
    </div>
    <div v-else-if="what2Show === '1'">
      <el-card class="box-card">
        <div
          slot="header"
          :style="{
            display: 'flex',
            justifyContent: 'start',
            alignItems: 'center',
            fontSize: '20px',
            color: 'black',
          }"
        >
          <i
            class="el-icon-check"
            :style="{
              color: 'lightGreen',
              fontSize: '32px',
              marginRight: '10px',
              fontWeight: '900',
            }"
          ></i>
          <span>支付成功</span>
        </div>
        <div class="text item">订单号 : {{ this.returnData.orderId }}</div>
        <div class="text item">创建时间 : {{ this.returnData.createTime }}</div>
        <div
          class="text item"
          v-if="this.returnData.goodsId.indexOf('r-') >= 0"
        >
          线路名称 : {{ this.returnData.goodsName }}
        </div>
        <div
          class="text item"
          v-if="this.returnData.goodsId.indexOf('h-') >= 0"
        >
          酒店名称 : {{ this.returnData.goodsName }}
        </div>
        <div class="text item" v-if="returnData.adNum !== null">
          成人票 : {{ this.returnData.adNum }} 张
        </div>
        <div class="text item" v-if="returnData.chNum !== null">
          儿童票 : {{ this.returnData.chNum }} 张
        </div>
        <div class="text item" v-if="returnData.economyNum !== null">
          经济间 : {{ this.returnData.economyNum }} 张
        </div>
        <div class="text item" v-if="returnData.singleNum !== null">
          单人间 : {{ this.returnData.singleNum }} 张
        </div>
        <div class="text item" v-if="returnData.doubleNum !== null">
          双人间 : {{ this.returnData.doubleNum }} 张
        </div>
        <div class="text item" v-if="returnData.manyNum !== null">
          多人间 : {{ this.returnData.manyNum }} 张
        </div>
        <div class="text item" v-if="returnData.vipNum !== null">
          套房 : {{ this.returnData.vipNum }} 张
        </div>
      </el-card>
    </div>
    <div v-else>
      <el-card class="box-card">
        <div
          slot="header"
          :style="{
            display: 'flex',
            justifyContent: 'start',
            alignItems: 'center',
            fontSize: '20px',
            color: 'black',
          }"
        >
          <i
            class="el-icon-close"
            :style="{
              color: 'red',
              fontSize: '32px',
              marginRight: '10px',
              fontWeight: '900',
            }"
          ></i>
          <span>支付失败</span>
        </div>
        <div class="text item">订单号 : {{ this.returnData.orderId }}</div>
        <div class="text item">创建时间 : {{ this.returnData.createTime }}</div>
        <div class="text item">失败原因：{{ this.returnData.msg }}</div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: window.localStorage.getItem("token"),
      returnForm: {
        orderId: this.$route.query.out_trade_no,
        pay: this.$route.query.total_amount,
      },
      returnData: {
        orderId: "",
        goodsId: "",
        goodsName: "",
        createTime: "",
        adNum: "",
        chNum: "",
        economyNum: "",
        singleNum: "",
        doubleNum: "",
        manyNum: "",
        vipNum: "",
        msg: "",
      },
      what2Show: "-1",
    };
  },
  mounted() {
    this.getReturn();
  },

  methods: {
    getReturn() {
      this.$axios({
        method: "POST",
        url: "/alipay/return",
        headers: { token: this.token },
        data: this.returnForm,
      })
        .then((response) => {
          console.log("123");
          const data = response.data;
          if (data.code !== 0) {
            this.$message.error(response.data.msg);
            this.what2Show = "0";
            this.returnData.orderId = data.page.orderId;
            this.returnData.createTime = data.page.createTime;
            this.returnData.msg = response.data.msg;
            return false;
          }
          const page = data.page;
          const goods = data.goods;
          if (page && goods) {
            this.returnData.orderId = page.orderId;
            this.returnData.goodsId = goods.goodsId;
            this.returnData.goodsName = goods.name;
            this.returnData.createTime = page.createTime;
            this.returnData.adNum = page.adNum;
            this.returnData.chNum = page.chNum;
            this.returnData.economyNum = page.economyNum;
            this.returnData.singleNum = page.singleNum;
            this.returnData.doubleNum = page.doubleNum;
            this.returnData.manyNum = page.manyNum;
            this.returnData.vipNum = page.vipNum;
            this.what2Show = "1";
          }

          return true;
        })
        .finally(() => {
          setTimeout(() => {
            // console.log("执行了该方法");
            const path = localStorage.getItem("path");
            const query = JSON.parse(localStorage.getItem("query"));
            localStorage.removeItem("path");
            localStorage.removeItem("query");
            this.$router.push({
              path,
              query,
            });
          }, 3000);
        });
    },
  },
};
</script>

<style scoped>
.yanzhen_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.box-card {
  width: 300px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 5px 0;
}
</style>
